<template>
	<view>
		<image src="../../../static/me/bg1.jpg" mode="" style="position: fixed;top: 0; left: 0;width: 100vw; height: 100vh;"></image>
		<view style="z-index: 100;position: absolute;width: 100vw;">
		<view style="margin: 30rpx 0 55rpx;">
			<view style="text-align: left;color: white;margin-left: 40rpx; font-size: 40rpx; ">
				<text @tap="type = '普通方式'" :style="type == '普通方式' ? ' background-color: #0055ff;' : ' background-color: #45b8ff;'">
					普通方式
				</text>
				<text @tap="type = '微信方式'" :style="type == '微信方式' ? ' background-color: #0055ff;' : 'background-color: #45b8ff;'">
					微信方式
				</text>
			</view>
		</view>

		<view style="padding: 0 5vw;">
			<view class="input-item" v-if="type == '普通方式'">
				<text class="tit">旧密码</text>
				<input type="password" v-model="params.oldPassword" placeholder="6-18位不含特殊字符的数字、字母组合" maxlength="18" />
			</view>
			<view class="input-item">
				<text class="tit">新密码</text>
				<input type="password" v-model="params.newPassword" placeholder="6-18位不含特殊字符的数字、字母组合" maxlength="18" />
			</view>
			<view class="input-item" style="margin-bottom: 30rpx;">
				<text class="tit">确认密码</text>
				<input type="password" v-model="params.rePassword" placeholder="6-18位不含特殊字符的数字、字母组合" maxlength="18" />
			</view>
			<button type="warn"O size="mini" style="margin: 0 10rpx;" @click="resetInputPassword()">重置</button>
			<button v-if="type == '普通方式'" type="primary" size="mini" style="margin: 0 10rpx;" @click="updatePassword()">确认修改</button>
			<button v-else type="primary" size="mini" style="margin: 0 10rpx;" @click="updatePasswordByWeiXin()">授权修改</button>
		</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: '普通方式',
			userInfo: null,
			params: {
				oldPassword: '',
				newPassword: '',
				rePassword: ''
			}
		};
	},
	onShow() {
		this.userInfo = uni.getStorageSync("userInfo")
	},
	methods: {
		// 清除输入的密码
		resetInputPassword() {
			this.params = {
				oldPassword: '',
				newPassword: '',
				rePassword: ''
			};
		},
		// 修改密码
		updatePassword() {
			let that = this;
			let oldPassword = this.params.oldPassword;
			let newPassword = this.params.newPassword;
			if (oldPassword.length < 6 || oldPassword.length > 18 || newPassword.length < 6 || newPassword.length > 18) {
				this.$msg('密码输入格式不正确');
				return;
			}
			if (newPassword !== this.params.rePassword) {
				this.$msg('两次输入的密码不一致');
				return;
			}
			let path = "/worker/password";
			if(that.userInfo.userType == '学生')
				path = "/student/password";
			that.$request(path, 'put', that.params).then(result => {
				that.$msg('密码修改成功', 2000, 'success');
				that.resetInputPassword();
			});
		},
		// 通过微信修改密码
		updatePasswordByWeiXin() {
			if (this.params.newPassword.length < 6 || this.params.newPassword.length > 18) {
				this.$msg('密码输入格式不正确');
				return;
			}
			if (this.params.newPassword !== this.params.rePassword) {
				this.$msg('两次输入的密码不一致');
				return;
			}

			const that = this;
			uni.login({
				provider: 'weixin',
				success: wxres => {
					// eg: {code: "073BdF1w3us1mV2SRk1w3MDxpH3BdF1z", errMsg: "login:ok"}
					console.log('微信code=', wxres.code);
					let path = '/worker/password/weixin';
					that.$request(path, 'put', {
						newPassword: that.params.newPassword,
						wxCode: wxres.code
					}).then(result => {
						that.$msg('密码修改成功', 2000, 'success');
						that.resetInputPassword();
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.input-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30upx;
	background: $page-color-light;
	height: 120upx;
	border-radius: 4px;
	margin-bottom: 10upx;

	&:last-child {
		margin-bottom: 0;
	}

	.tit {
		height: 50upx;
		line-height: 56upx;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
	}

	input {
		height: 60upx;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		width: 100%;
	}
}

.confirm-btn {
	height: 76upx;
	line-height: 76upx;
	border-radius: 50px;
	background: $uni-color-primary;
	color: #fff;
}

.section {
	font-size: $font-sm + 2upx;
	color: $font-color-spec;
	text-align: center;
	margin-top: 10px;
}
</style>
